<template>
  <div class="product">
    <product-param :title="product.name">
      <template v-slot:buy>
        <button class="btn" @click="buy">立即购买</button>
      </template>
    </product-param>
    <div class="content">
      <div class="item-bg">
        <h2>{{product.name}}</h2>
        <h3>{{product.subtitle}}</h3>
        <p>
          <a href="" id="">全球首款双频 GP</a>
          <span>|</span>
          <a href="" id="">骁龙845</a>
          <span>|</span>
          <a href="" id="">AI 变焦双摄</a>
          <span>|</span>
          <a href="" id="">红外人脸识别</a>
        </p>
        <div class="price">
          <span>￥<em>{{product.price}}</em></span>
        </div>
      </div>
      <div class="item-bg-2"></div>
      <div class="item-bg-3"></div>
      <div class="item-swiper">
        <swiper :options="swiperOptions">
            <swiper-slide><img src="/imgs/product/gallery-2.png" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/product/gallery-3.png" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/product/gallery-4.png" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/product/gallery-5.jpg" alt=""></swiper-slide>
            <swiper-slide><img src="/imgs/product/gallery-6.jpg" alt=""></swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
        <p class="desc">小米8 AI变焦双摄拍摄</p>
      </div>
      <div class="item-video">
        <h2>60帧超慢动作摄影<br/>慢慢回味每一瞬间的精彩</h2>
        <p>后置960帧电影般超慢动作视频，将眨眼间的美妙展现得淋漓尽致！<br/>更能AI 精准分析视频内容，15个场景智能匹配背景音效。</p>
        <div class="video-bg" @click="showSlide='slideDown'"></div>
        <div class="video-box">
          <!-- <div class="overlay" v-show="showSlide"></div> -->
          <div class="overlay" v-if="showSlide === 'slideDown'"></div>
          <div class="video" :class="showSlide">
            <!-- muted静音播放 autoplay自动播放 -->
            <span class="icon-close" @click="showSlide='slideUp'"></span>
            <video muted autoplay src="/imgs/product/video.mp4" controls></video>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import ProductParam from '@/components/ProductParam';
  import 'swiper/css/swiper.css'
  import { swiper, swiperSlide } from 'vue-awesome-swiper'
  export default {
    name: 'product',
    components: {
      ProductParam,
      swiper,
      swiperSlide,
    },
    data () {
      return {
        // showSlide: false,
        showSlide:'',
        product: {},
        swiperOptions:{
          autoplay:true,
          // 一页放三张
          slidesPerView:3,
          // 间隔
          spaceBetween: 30,
          // 默认为false，普通模式：slide滑动时只滑动一格，并自动贴合wrapper，
          // 设置为true则变为free模式，slide会根据惯性滑动可能不止一格且不会贴合。
          freeMode: true,
          pagination: {
            el: '.swiper-pagination',
            clickable :true,
          }
        }
      }
    },
    mounted() {
      this.getProductInfo()
    },
    methods: {
      getProductInfo () {
        let id = this.$route.params.id
        this.axios({
          method:'get',
          url: `/products/${id}`
        }).then(res => {
          this.product = res
          console.log(this.product)
        })
      },
      buy () {
        let id = this.$route.params.id
        this.$router.push('/detail/'+id)
      }
    }
  }
</script>

<style lang='scss' scoped>
  @import '@/assets/scss/mixin.scss';
  .product {
    .content {
      .item-bg{
        background:url('/imgs/product/product-bg-1.png') no-repeat center;
        height:718px;
        text-align:center;
        h2{
          font-size:80px;
          padding-top:55px;
        }
        h3{
          font-size:24px;
          letter-spacing: 10px;
        }
        p{
          margin-top:21px;
          margin-bottom:40px;
          a{
            font-size:16px;
            color:#333333;
          }
          span{
            margin:0 15px;
          }
        }
        .price{
          font-size:30px;
          color:#333333;
          em{
            font-style:normal;
            font-size:38px;
          }
        }
      }
      .item-bg-2{
        background:url(/imgs/product/product-bg-2.png) no-repeat center;
        height:480px;
        background-size:1226px 397px;
      }
      .item-bg-3{
        background:url(/imgs/product/product-bg-3.png) no-repeat center;
        height:638px;
        background-size:cover;
      }
      .item-swiper{
        margin:36px auto 52px;
        .desc{
          font-size:18px;
          color:#333333;
          text-align:center;
        }
        img{
          width:100%;
        }
      }
      .item-video{
        height:1044px;
        background-color:#070708;
        margin-bottom:76px;
        color:#FFFFFF;
        text-align:center;
        h2{
          font-size:60px;
          padding-top:82px;
          margin-bottom:47px;
        }
        p{
          font-size:24px;
          margin-bottom:58px;
        }
        .video-bg{
          background:url('/imgs/product/gallery-1.png') no-repeat center;
          background-size:cover;
          width:1226px;
          height:540px;
          margin:0 auto 120px;
          cursor:pointer;
        }
        .video-box{
          .overlay{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba($color: #333333, $alpha: .4);
            z-index:5;
          }
          .video {
            z-index: 10;
            position: fixed;
            top: -50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 1000px;
            height: 536px;
            opacity: 0;
            // 单页动画一般用transition
            // transition: all 1s;
            // &.slide {
            //   top: 50%;
            //   opacity: 1;
            // }
            // 动画都是成对出现的
            &.slideDown {
              animation: slideDown 1s linear forwards;
            }
            &.slideUp {
              animation: slideUp 1s linear forwards;
            }
            @keyframes slideDown {
              from {
                top: -50%;
                opacity: 0;
              }
              to {
                top: 50%;
                opacity: 1;
              }
            }
            @keyframes slideUp {
              to {
                top: -50%;
                opacity: 0;
              }
              from {
                top: 50%;
                opacity: 1;
              }
            }
            video {
              height: 100%;
              width: 100%;
              // 覆盖窗口
              object-fit: cover;
              outline: none;
            }
            .icon-close {
              @include bgImg(20px, 20px, '/imgs/icon-close.png');
              position: absolute;
              top: 20px;
              right: 20px;
              cursor: pointer;
              z-index: 10;
            }
          }
        }
      }
    }
  }
</style>
